<template>
	<view class="content">
		<view class="top_box">
			<view class="t1">
				每邀请 1 位好友
			</view>
			<view class="t2">
				立得<text>100</text>元
			</view>
			<view class="btn" @click="handleToPoster">
				立即邀请
			</view>
		</view>
		<view class="bot_box">
			<view class="top">
				<view class="item">
					<text class="num">1</text>
					<text class="text">转发分享</text>
				</view>
				<view class="item">
					<text class="num">2</text>
					<text class="text">好友注册</text>
				</view>
				<view class="item">
					<text class="num">3</text>
					<text class="text">首单购买</text>
				</view>
				<view class="item">
					<text class="num">4</text>
					<text class="text">确认收货</text>
				</view>
				<view class="item">
					<text class="num">5</text>
					<text class="text">佣金到账</text>
				</view>
			</view>
			<view class="bot">
				<view class="text">
					<view class="line">
						<text>已邀请</text>
						<view class="img">
							<image v-for="item in list" :key="item.id" :src="item.pic" mode=""></image> 
						</view>
						<text>{{total}}人</text>
					</view>
					  <view class="line">
						<text>获得累计收益</text>
						<text class="b">{{info.accumulateIncome}}</text>
						<text>元</text>
					</view> 
				</view>
				<view class="btn" @click="handleToDetail">
					去看看
				</view>
			</view>
		</view>
		<view class="bot_text">
			<view class="title">
				如何赚取收益？
			</view>
			<view class="dec" v-html="text">
				 
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				total:'',
				list:[],
				info:'',
				text:''
			}
		},
		onLoad() {
			this.getDetail()
			this.getList()
			this.getText()
		},
		methods:{ 
			
			getText(){
				this.$http({
					url:"/umsContent/queryById",
					method:"get",
					data:{
						id:3
					}
				}).then(data=>{
					this.text = data.content
				})
			},
			getDetail(){
				this.$http({
					url:"/umsVault/queryOwnInfo",
					method:"get"
				}).then(data=>{
					this.info = data
				})
			},
			getList(){
				this.$http({
					url:"/umsVaultDetail/commissionQuery",
					method:"get",
					data:{
						pageNum:1,
						pageSize:3
					}
				}).then(data=>{
					this.list = data.list
					this.total = data.total
				})
			},
			handleToPoster(){
				uni.navigateTo({
					url:"./poster"
				})
			},
			handleToDetail(){
				uni.navigateTo({
					url:"./list"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 30rpx;
		.bot_text{
			margin-top: 56rpx;
			.title{
				font-weight: bold;
				font-size: 28rpx;
				color: #333;
				margin-bottom: 20rpx;
			}
			.dec{
				font-size: 24rpx;
				color: #666666;
			}
		}
		.bot_box{
			width: 100%;
			background: #FFFFFF;
			border-radius: 2rpx;
			border: 1rpx dashed #020202;
			margin-top: 50rpx;
			padding: 33rpx;
			box-sizing: border-box;
			padding-top: 44rpx;
			.btn{
				width: 240rpx;
				height: 73rpx;
				background: #020202;
				border-radius: 50rpx;
				text-align: center;
				line-height: 73rpx;
				color: #fff;
				font-size: 26rpx;
				margin: 0 auto;
				margin-top: 40rpx;
			}
			.bot{
				.text{
					.line{
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 30rpx;
						&:last-child{
							margin-bottom: 0;
						}
						text{
							font-size: 28rpx;
							color: #666666;
						}
						.b{
							font-size: 32rpx;
							color: #020202;
							font-weight: bold;
							display: inline-block;
							margin: 0 6rpx;
						}
						.img{
							display: flex;
							align-items: center;
							margin: 0 10rpx;
							image{
								width: 40rpx;
								height: 40rpx;
								border: 1px solid #020202;
								border-radius: 50%;
								margin-left: -10rpx;
								&:first-child{
									margin-left: 0;
								}
							}
						}
					}
				}
			}
			.top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 40rpx;
				border-bottom: 1px solid #e8e8e8;
				margin-bottom: 40rpx;
				.item{
					.text{
						font-size: 24rpx;
						color: #020202;
					}
					.num{
						display: block;
						width: 40rpx;
						height: 40rpx;
						background: rgba(4,0,0,0.06);
						text-align: center;
						line-height: 40rpx;
						border-radius: 50%;
						font-size: 24rpx;
						color: #020202;
						font-weight: bold;
						margin: 0 auto;
						margin-bottom: 12rpx;
					}
				}
			}
		}
		.top_box{
			width: 100%;
			background: #F8F8F8;
			padding: 40rpx 0;
			box-sizing: border-box;
			.btn{
				width: 240rpx;
				height: 73rpx;
				background: #020202;
				border-radius: 50rpx;
				text-align: center;
				line-height: 73rpx;
				color: #fff;
				font-size: 26rpx;
				margin: 0 auto;
				margin-top: 32rpx;
			}
			.t1{
				font-size: 40rpx;
				color: #020202;
				font-weight: bold;
				text-align: center;
			}
			.t2{
				font-size: 32rpx;
				color: #666666;
				text-align: center;
				margin-top: 16rpx;
				text{
					font-weight: bold;
					color: #333;
					display: inline-block;
					margin: 0 10rpx;
				}
			}
		}
	}
</style>